<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			div {
				text-align: center;
			}

		</style>
	</head>
	<body>
		<div>
			<img src="img/1.jpg" alt="" id="image">
			<br>
			<button id="left">-</button>
			<button id="right">+</button>
		</div>
	</body>
</html>
<script>
	// 获取元素
	var leftBtn = document.getElementById('left');
	var rightBtn = document.getElementById('right');
	var image = document.getElementById('image');
	var n = 1;

	rightBtn.onclick = function() {
		n++;
		n = n == 9 ? 1 : n;
		image.src = "img/" + n + ".jpg";
	};

	leftBtn.onclick = function() {
		n--;
		n = n == 0 ? 8 : n;
		image.src = "img/" + n + ".jpg";
	};










</script>




